<template>
  <view class="my-numberbox">
    <up-number-box
      :min="min"
      :max="max"
      integer
      disabledInput
      @overlimit="onOverlimit"
    >
      <template #minus>
        <view class="minus" @click="onMinus">
          <up-icon name="minus" size="12"></up-icon>
        </view>
      </template>
      <template #input>
        <text style="width: 50px; text-align: center" class="input" @click.stop>
          {{ value }}
        </text>
      </template>
      <template #plus>
        <view class="plus" @click="onPlus">
          <up-icon name="plus" color="#FFFFFF" size="12"></up-icon>
        </view>
      </template>
    </up-number-box>
  </view>
</template>

<script setup>
const emits = defineEmits(["plus", "minus", "overlimit"]);

const value = defineModel({ type: Number, default: 0 });

const props = defineProps({
  min: {
    type: Number,
    default: 1,
  },
  max: {
    type: Number,
    default: 10000,
  },
});

function onMinus() {
  emits("minus");
}

function onPlus() {
  emits("plus");
}

function onOverlimit(event) {
  emits("overlimit", event);
}
</script>

<style lang="scss" scoped>
.my-numberbox {
  .minus {
    width: 44rpx;
    height: 44rpx;
    border-width: 1px;
    border-color: #483735;
    border-style: solid;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    @include flex;
    justify-content: center;
    align-items: center;
  }

  .qty-input {
    text-align: center;
    padding: 0 10px;
    color: #000;
    font-size: 28rpx;
    display: inline-block;
  }

  .plus {
    width: 44rpx;
    height: 44rpx;
    background-color: #ff0000;
    border-radius: 50%;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
  }
}
</style>
